import Wrapper from "./style";
import {Button, Checkbox, GetProp, Switch, Tabs, TabsProps} from "antd";

const TeacherCourseSettingContent = () => {
    // tabs
    const onChange = (key: string) => {
        console.log(key);
    };
    // 基本信息
    const BaseInfo = () => {
        return (
            <div className='table'>
                <div className='flex top'>
                    <div className='title'>基本信息</div>
                    <Button type={'primary'}>编辑</Button>
                </div>
                <form>
                    <div className='item'>
                        <label>课程名称</label>
                        <div className='content'>aaa</div>
                    </div>
                    <div className='item'>
                        <label>教学班级</label>
                        <div className='content'>asdas</div>
                    </div>
                    <div className='item'>
                        <label>学年-学期</label>
                        <div className='content'>2025-2026第一学期</div>
                    </div>
                </form>
            </div>
        )
    }
    // 报名设置
    const RegistrationSettings = () => {
        const onChange = (checked: boolean) => {
            console.log(`switch to ${checked}`);
        };
        const onCheckBoxChange: GetProp<typeof Checkbox.Group, 'onChange'> = (checkedValues) => {
            console.log('checked = ', checkedValues);
        };
        const optionsWithDisabled = [
            {label: 'Apple', value: 'Apple'},
            {label: 'Pear', value: 'Pear'},
            {label: 'Orange', value: 'Orange', disabled: false},
        ];
        return (
            <div className='table'>
                <div className='flex top'>
                    <div className='title'>报名设置</div>
                    <Button type={'primary'}>编辑</Button>
                </div>
                <form>
                    <div className='item'>
                        <label>报名设置</label>
                        <div className='content'>
                            <Switch defaultChecked onChange={onChange}/>
                        </div>
                    </div>
                    <div className='item'>
                        <label>审核方式</label>
                        <div className='content'>自动审核</div>
                    </div>
                    <div className='item'>
                        <label>审核后自动加入标签</label>
                        <div className='content'>
                            <Checkbox.Group options={optionsWithDisabled} defaultValue={['Apple']}
                                            onChange={onCheckBoxChange}/>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '基本信息(必填)',
            children: <BaseInfo/>,
        },
        {
            key: '2',
            label: '报名设置',
            children: <RegistrationSettings/>,
        },
    ];

    return (
        <Wrapper>
            <div className="main">
                <Tabs defaultActiveKey="1" items={items} onChange={onChange}/>
            </div>
        </Wrapper>
    )
}
export default TeacherCourseSettingContent